.skeleton-container {
  padding: 20px;
  animation: fade .3s ease-in-out;
}

.skeleton-line,
.skeleton-box {
  background: #e2e2e2;
  border-radius: 5px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.skeleton-line.big { height: 25px; width: 70%; }
.skeleton-line.medium { height: 18px; width: 50%; }
.skeleton-line.small { height: 12px; width: 80%; }

.skeleton-box { height: 180px; width: 100%; }

.skeleton-line::after,
.skeleton-box::after {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: linear-gradient(90deg, transparent, #ffffff90, transparent);
  animation: shimmer 1.3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}